<!-- 散点图 -->
<template>
  <div>
    <div class="  text-slate-400 ">【评分与观看人数关系】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  data: Array,
});
let chart = null;
const target = ref(null);

onMounted(() => {
  chart = echarts.init(target.value);
  ChartInit(); // 将 chart 传递给 ChartInit 函数
});

const ChartInit = () => {
  if (!props.data || props.data.length === 0) {
    console.log("No data to display");
    return;
  }
const option = {
  xAxis: {
    name: '评分',
    type: 'value',
    min: 8,
    max: 10,
    interval: 0.3,
  },
  yAxis: {
    name: '观看人数',
    type: 'value'
  },
  grid: {
      top: 10,
      right: 10,
      bottom: 20,
      left: 10,
      containLabel: true,
    },
  series: [
    {
      symbolSize: 10,
      data: props.data.map(item => [item.rating, item.number_of_reviews]),
      type: 'scatter',
      itemStyle: {
        color: '#5475f5' 
      }
    }
  ]
};
  chart.setOption(option);
};
watch(() => props.data, ChartInit);
</script>

<style lang="scss" scoped>

</style>
